Highcharts হলো একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরি যা ইন্টারঅ্যাকটিভ এবং রেসপন্সিভ চার্ট তৈরির জন্য ব্যবহৃত হয়। Highcharts ব্যবহার করে ডেটা কনফিগারেশন করা গুরুত্বপূর্ণ, কারণ এটি চার্টের আউটপুট এবং প্রদর্শনকে সরাসরি প্রভাবিত করে। এখানে আমরা দেখব কীভাবে Highcharts এর সাথে ডেটা কনফিগারেশন করতে হয়।

Highcharts এর ডেটা কনফিগারেশন

Highcharts এ ডেটা কনফিগারেশন প্রধানত দুটি উপাদানে বিভক্ত:

1. Chart Options
2. Series Data

1. Chart Options

Chart Options Highcharts চার্টের সাধারণ কনফিগারেশন যেমন চার্টের শিরোনাম, এক্সিস লেবেল, টুলটিপ কনফিগারেশন ইত্যাদি নির্ধারণ করে। এই সেটিংসগুলি সাধারণত chart, title, xAxis, yAxis, tooltip ইত্যাদির মাধ্যমে কনফিগার করা হয়।

Chart Configuration Example:

Highcharts.chart('container', {
  chart: {
    type: 'line' // চার্টের প্রকার (line, bar, pie, ইত্যাদি)
  },
  title: {
    text: 'Sales Data' // চার্টের শিরোনাম
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] // এক্সিসের জন্য ক্যাটেগরি (এখানে মাস)
  },
  yAxis: {
    title: {
      text: 'Amount' // yAxis এর শিরোনাম
    }
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b>' // টুলটিপের কনটেন্ট কনফিগারেশন
  },
  series: [{ // ডেটার জন্য সিরিজ কনফিগারেশন
    name: '2024',
    data: [100, 200, 300, 400, 500] // ডেটা পয়েন্ট
  }]
});

2. Series Data

Series Data হলো চার্টের মধ্যে প্রদর্শিত ডেটার মূল অংশ। এটি data আর্গুমেন্ট ব্যবহার করে সিরিজ আকারে ডেটা প্রদর্শন করে। প্রতিটি সিরিজে একটি name (যেমন: "2024 Sales") এবং একটি data অ্যারে (যে অ্যারে ইনপুট ডেটা প্রদান করবে) থাকে।

Series Data Configuration Example:

series: [{
  name: '2024',
  data: [100, 200, 300, 400, 500] // ডেটা পয়েন্টসমূহ
}]

এখানে, name হলো সিরিজের নাম যা লেজেন্ডে প্রদর্শিত হবে, এবং data হলো সেই সিরিজের ডেটা পয়েন্টগুলির অ্যারে যা চার্টে প্রদর্শিত হবে।

Highcharts এ Multiple Series ব্যবহার

Highcharts-এ একাধিক সিরিজ ব্যবহার করে আপনি একাধিক ডেটা সেট একটি চার্টে প্রদর্শন করতে পারেন। একাধিক সিরিজের ডেটা কনফিগারেশন এরকম হবে:

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Sales Data Comparison'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  series: [{
    name: '2024 Sales',
    data: [100, 200, 300, 400, 500]
  }, {
    name: '2025 Sales',
    data: [150, 250, 350, 450, 550]
  }]
});

এখানে দুটি সিরিজ 2024 Sales এবং 2025 Sales ডেটা দিয়ে প্রদর্শিত হচ্ছে।

3. Highcharts এ ডেটার ধরনের কনফিগারেশন

Highcharts বিভিন্ন ধরনের ডেটা প্রদর্শনের জন্য বিভিন্ন series.type ব্যবহার করতে দেয়, যেমন:

• line: লাইন চার্ট।
• bar: বার চার্ট।
• column: কলাম চার্ট।
• pie: পাই চার্ট।

Example:

Highcharts.chart('container', {
  chart: {
    type: 'pie' // পাই চার্ট কনফিগারেশন
  },
  title: {
    text: 'Market Share'
  },
  series: [{
    name: 'Market Share',
    colorByPoint: true,
    data: [{
      name: 'Company A',
      y: 45
    }, {
      name: 'Company B',
      y: 55
    }]
  }]
});

4. Highcharts ডেটা কাস্টমাইজেশন

Highcharts এর মধ্যে আপনি ডেটা কাস্টমাইজেশনও করতে পারেন যেমন:

• Custom Tooltip: টুলটিপের কাস্টম কনফিগারেশন।
• Data Labels: ডেটা পয়েন্টের উপরে লেবেল দেখানো।
• Data Markers: পয়েন্টের চিহ্ন নির্ধারণ।

Custom Tooltip Example:

tooltip: {
  pointFormatter: function () {
    return this.series.name + ': <b>' + this.y + '</b>';
  }
}

সারাংশ

Highcharts এর সাথে ডেটা কনফিগারেশন করতে হলে, chart options এবং series data এর মাধ্যমে চার্টের সমস্ত সেটিংস কনফিগার করা হয়। আপনি একাধিক সিরিজ, ডেটা পয়েন্ট, কাস্টম টুলটিপ এবং অন্যান্য ভিজ্যুয়াল বৈশিষ্ট্য ব্যবহার করে আপনার চার্ট কাস্টমাইজ করতে পারেন। Highcharts এর ডেটা কনফিগারেশন অত্যন্ত ফ্লেক্সিবল এবং সহজ, যা আপনাকে বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে সহায়তা করে।